<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件处理</title>
        <style>
            .outer { border: 1px solid blue ; padding: 10px ; }
            .outer>a { display: inline; padding: 5px ; border: 1px solid gray;}
        </style>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <h3>用Vue处理事件</h3>

        <div id="app">
            <div class="outer" v-on:click.prevent="handler">
                <a href="http://www.kaifamiao.com" v-on:click.prevent.stop="handler" >开发喵</a>
            </div>
            <ul>
                <li>使用 v-on 指令的 .prevent 修饰符可以阻止事件的默认行为</li>
                <li>使用 v-on 指令的 .stop 修饰符可以阻止事件的传播行为</li>
            </ul>
        </div>

        
        <script>
            const app = Vue.createApp({
                methods: {
                    handler(e){
                        console.log( e.target );
                    }
                }
            });
            app.mount( '#app' );
        </script>
        
    </body>
</html>